<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <div class="all">
      <div class="form-all">
        <el-form
          ref="form"
          :model="form"
          :inline="true"
          style="font-weight: 400;"
          label-width="80px"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="车型编号:"
                class="item"
              >
                <el-input
                  v-model="form.id"
                  style="width: 283px;"
                  placeholder="请输入车型编号"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载重量:"
                class="item"
              >
                <el-select
                  v-model="form.allowableLoad"
                  style="width: 257px;"
                  placeholder="请输入应载重量"
                >
                  <el-option
                    v-for="item in allowableLoad"
                    :key="item.value"
                    :value="item.value"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="应载体积:"
                class="item"
              >
                <el-select
                  v-model="form.allowableVolume"
                  style="width: 227px;"
                  placeholder="请输入应载体积"
                >
                  <el-option
                    v-for="item in allowableVolume"
                    :key="item.value"
                    :value="item.value"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="车辆类型:"
                class="item"
              >
                <el-input
                  v-model="form.name"
                  style="width: 283px;"
                  placeholder="请输入车辆类型"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item style="padding-left: 20px;">
                <el-button
                  class="seach-btn"
                  @click="seachBtn"
                >搜索</el-button>
                <el-button
                  class="reset-btn"
                  @click="resetBtn"
                >重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-all form-list">
        <el-button
          class="add-btn"
          @click="addBtn()"
        >新增车型</el-button>
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          :row-style="{ height: 50 + 'px' }"
          :cell-style="{ padding: 0 + 'px' }"
        >
          <div
            v-show="showImg"
            slot="empty"
          >
            <img src="@/icons/编组 15.png">
            <span style="display: block;">没有找到您要的内容哦~</span>
          </div>
          <el-table-column
            label="序号"
            width="60px"
          >
            <template #default="slot">
              {{ (slot.$index+1)+(form.page-1)*form.pageSize }}
            </template>
          </el-table-column>
          <el-table-column
            label="车型编号"
            width="193px"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="车辆类型"
            width="136px"
            prop="name"
          ></el-table-column>
          <el-table-column
            label="车辆数量"
            width="104px"
            prop="num"
          ></el-table-column>
          <el-table-column
            label="应载重量（吨）"
            width="157px"
            prop="allowableLoad"
          ></el-table-column>
          <el-table-column
            label="应载体积（立方米）"
            width="157px"
            prop="allowableVolume"
          ></el-table-column>
          <el-table-column
            label="长（米）"
            width="104px"
            prop="measureLong"
          ></el-table-column>
          <el-table-column
            label="宽（米）"
            width="104px"
            prop="measureWidth"
          ></el-table-column>
          <el-table-column
            label="高（米）"
            width="104px"
            prop="measureHigh"
          ></el-table-column>

          <el-table-column
            label="操作"
            width="110px"
            align="center"
          >
            <template v-slot="{ row }">
              <el-button
                type="text"
                style="font-size: 13px;"
                @click="editBtn(row.id)"
              >编辑</el-button>
              <div class="partition"></div>
              <el-button
                type="text"
                style="font-size: 13px; color: #f56c6c;"
                @click="delBtns(row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="changePagesize"
          @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
    <!-- 添加组件 -->
    <car-models-add
      ref="carAdd"
      :show-dialog.sync="showDialog"
      :check="check"
      :transmit-id="transmitId"
      @update="list(params)"
    >
    </car-models-add>
    <!-- 确认删除弹框 -->
    <el-dialog
      title="删除确认"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="cancel"
    >
      <el-row
        type="flex"
        justify="start"
      >
        <span>确定要删除车型吗？</span>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          class="exit-btn"
          @click="cancel"
        >取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          class="req-btn"
          @click="delBtn"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { list, del } from '@/api/transit'
import CarModelsAdd from './components/car-models-add.vue'
export default {
  components: {
    CarModelsAdd
  },
  data() {
    return {
      // form表单
      form: {
        allowableLoad: '', // 载重下拉框
        allowableVolume: '', // 体积下拉框
        id: '',
        name: '',
        page: 1,
        pageSize: 10
      },
      // 载重数据
      allowableLoad: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '100>（吨）'
        }
      ],
      // 体积数据
      allowableVolume: [
        {
          value: 'RANGE_LEVEL_1',
          name: '<3（m³）'
        },
        {
          value: 'RANGE_LEVEL_2',
          name: '3-5（m³）'
        },
        {
          value: 'RANGE_LEVEL_3',
          name: '5-10（m³）'
        },
        {
          value: 'RANGE_LEVEL_4',
          name: '10-15（m³）'
        },
        {
          value: 'RANGE_LEVEL_5',
          name: '15-30（m³）'
        },
        {
          value: 'RANGE_LEVEL_6',
          name: '30-50（m³）'
        },
        {
          value: 'RANGE_LEVEL_7',
          name: '50-80（m³）'
        },
        {
          value: 'RANGE_LEVEL_8',
          name: '80-150（m³）'
        },
        {
          value: 'RANGE_LEVEL_9',
          name: '150>（m³）'
        }
      ],
      // table数据
      tableData: [],
      // 条数
      totals: 0,
      // 添加组件展示
      showDialog: false,
      // 传递组件判断值
      check: 1,
      // 删除弹框显示
      dialogVisible: false,
      delId: 0,
      delNum: 0,
      params: {
        page: 1,
        pageSize: 10
      },
      // 无数据显示
      showImg: false,
      // 子组件传递id
      transmitId: '',
      loading: true
    }
  },
  created() {
    // 初始化表单
    this.list(this.form)
  },
  methods: {
    // 渲染表单
    async list(data) {
      const res = await list(data)
      // console.log(res.data.counts)
      this.tableData = res.data.items
      // console.log(this.tableData)
      // 判断表单数据是否存在
      if (!this.tableData) {
        this.showImg = true
        console.log(111)
      }
      // 转换Number
      this.totals = Number(res.data.counts)
      setTimeout(() => {
        this.loading = false
      }, 100)
    },
    // 页码改变
    changePage(val) {
      // console.log(val)
      this.form.page = val
      this.list(this.form)
    },
    // 每页数据改变
    changePagesize(val) {
      // console.log(val)
      this.form.pageSize = val
      this.list(this.form)
    },
    // 删除确认按钮逻辑
    async delBtn() {
      if (this.delNum) {
        this.$message.error('此车型下面有车辆，不能删除')
        return
      }
      await del(this.delId)
      this.dialogVisible = false
      this.$message.success('删除成功')
      this.list(this.params)
    },
    // 编辑按钮
    editBtn(id) {
      this.check = 0
      this.transmitId = id
      this.$refs.carAdd.detail(id)
      setTimeout(() => {
        this.showDialog = true
      }, 300)
    },
    // 添加按钮
    addBtn() {
      this.check = 1
      this.transmitId = ''
      setTimeout(() => {
        this.showDialog = true
      }, 300)
    },
    // 搜索按钮
    seachBtn() {
      // console.log(this.form)
      this.form.page = 1
      this.form.pageSize = 10
      this.list(this.form)
    },
    // 重置按钮
    resetBtn() {
      this.form.id = ''
      this.form.name = ''
      this.form.allowableLoad = ''
      this.form.allowableVolume = ''
      this.form.page = 1
      // this.form.pageSize = 10
      this.list(this.form)
    },
    // 删除按钮
    delBtns(data) {
      this.dialogVisible = true
      this.delId = data.id
      this.delNum = data.num
    },
    // 点击删除后点击取消按钮
    cancel() {
      this.dialogVisible = false
      this.$message('取消')
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.add-btn {
  margin-bottom: 20px;
  width: 100px;
  height: 40px;
  background: #e15536;
  border-radius: 4px;
  border-color: transparent;
  color: #fff;
}

.req-btn {
  background: #e15536;
  border-radius: 4px;
  border-color: transparent;
  color: #fff;
}

.req-btn:hover {
  background: #ffab98 !important;
}

.req-btn:focus {
  background: #ffab98 !important;
}

.add-btn:hover {
  background: #ffab98 !important;
}

.add-btn:focus {
  background: #ffab98 !important;
}

.alert {
  margin: 10px 0px;
}

.pagination {
  margin-top: 40px;
  padding-bottom: 0px;
}

.el-select {
  width: 100%;
}

.car-models ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.car-models {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }

  ::v-deep .el-dialog__body {
    // text-align: center;
    padding: 40px 60px 0 30px;
  }

  .warn-img {
    width: 40px;
  }

  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }

  .form-all {
    background-color: #fff;
    padding-top: 20px;
    margin-bottom: 20px;
    padding-left: 0;
    border-radius: 4px;
    font-weight: 400;
  }

  .all {
    padding: 20px;
    padding-top: 23px;
  }

  .item {
    margin-left: 33px;
    margin-right: 30px;
    margin-bottom: 20px;
  }

  ::v-deep label {
    padding-left: 8px;
    font-weight: 400 !important;
  }

  .seach-btn {
    width: 90px;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 400;
    height: 40px;
    background: #e15536;
    color: #fff;
    border-color: transparent;
  }

  .seach-btn:hover {
    background: #ffab98 !important;
  }

  .seach-btn:focus {
    background: #ffab98 !important;
  }

  .reset-btn {
    width: 90px;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 400;
  }

  .exit-btn:hover {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }

  .exit-btn:focus {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }

  .reset-btn:hover {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }

  .reset-btn:focus {
    background: #ffeeeb !important;
    border-color: #f3917c !important;
    color: #e15536 !important;
  }

  .form-list {
    padding: 28px;
  }

  ::v-deep .active {
    color: #e15536;
  }

  ::v-deep .el-table__row {
    height: 30px;
  }

  .partition {
    width: .8px;
    height: 12px;
    background-color: lavender;
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 5px;
  }

  .el-pagination {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  ::v-deep .el-pagination .el-pager li:hover {
    color: #e15536 !important;
  }
  // sizes, prev, pager, next, jumper
    ::v-deep .el-pagination button:hover {
    color: #e15536 !important;
  }
  ::v-deep .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color:  #e15536 !important;
}

}
</style>
